<template>
  <!-- <div class="top">
    <MyHeader title="猫眼电影" :hasIcon="true"></MyHeader>
    <MyTabBar />
  </div>
  <div class="content">
    <MyRated />
    <MyMovies :moviesList="moviesList" />
    <p v-if="done">-----我是有底线的-------</p>
  </div>

  <div class="tip" v-show="top > 300">打开app</div> -->

  <RouterView />

  <!-- 给容器添加keepAlive的时候，要用到routerView的插槽 -->
  <!-- <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view> -->

  <MyFooter />
</template>

<script>
// import MyHeader from "./movies/components/MyHeader.vue";
// import MyTabBar from "./movies/components/MyTabBar.vue";
// import MyRated from "./movies/components/MyRated.vue";
// import MyMovies from "./movies/components/MyMovies.vue";
import MyFooter from "./components/MyFooter.vue";

export default {
  components: {
    // MyHeader,
    // MyTabBar,
    // MyRated,
    // MyMovies,
    MyFooter,
  },
  data() {
    return {
      // 滚动条离上面的距离，控制打开app按钮的
      top: 0,
      // 需要传递给子组件的电影列表
      moviesList: [],
      ids: [],
      total: 0,
      // moreList: [],

      startIndex: 0,

      // 布尔值，来控制是否已经全部结束了
      done: false,
    };
  },
  mounted() {
    // 请求电影列表的初始数据
    // this.getMoviesList();
    window.addEventListener("scroll", this.listenScroll);
  },
  beforeUnmount() {
    window.removeEventListener("scroll", this.listenScroll);
  },
  methods: {
    // 请求电影列表的初始数据
    getMoviesList() {
      fetch("http://118.24.239.63:3000/api/movies/list")
        .then((response) => response.json())
        .then((res) => {
          if (res.success) {
            this.moviesList = res.data;
            // 还需要拿到所有的id
            this.ids = res.ids;
            this.total = res.total;
            this.startIndex = res.data.length;
          }
        });
    },
    listenScroll() {
      // 控制是否要显示打开app的按钮
      this.top = document.documentElement.scrollTop;

      if (!this.done) {
        // 查看是否滚动条滚到底了

        // 表示的是可见区域的高度(手机的高度)
        const clientHeight = window.innerHeight;
        // 滚动条离最顶上的距离
        const scrollTop = document.documentElement.scrollTop;
        // 所有子元素的总高度
        const scrollHeight = document.documentElement.scrollHeight;
        if (clientHeight + scrollTop === scrollHeight) {
          // 如果到底了，就可以去请求加载更多的数据了
          // console.log("到底了");
          // 在加载更多发送之前，先准备好要发送的id
          const arr = this.ids.slice(this.startIndex, this.startIndex + 10);

          fetch("http://118.24.239.63:3000/api/movies/more", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              ids: arr.join(","),
            }),
          })
            .then((response) => response.json())
            .then((res) => {
              this.moviesList = [...this.moviesList, ...res.data];
              // this.moreList = res.data;
              this.startIndex += res.data.length;
              if (this.startIndex === this.total) {
                // 全部的数据都请求到了
                this.done = true;
              }
            });
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.top {
  position: fixed;
  top: 0;
  left: 0;
  width: 375px;
  height: 96px;
  z-index: 99;
}

.content {
  margin-top: 96px;
  margin-bottom: 48px;
}

.tip {
  position: fixed;
  right: 0;
  bottom: 150px;
  width: 110px;
  height: 38px;
  background-color: @theme-color;
  border-radius: 19px 0 0 19px;
  font-size: 16px;
  color: #fff;
  .center();
}
</style>
